<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- CSS选择器 -->
    <!-- 标签选择器 -->
    <div>i am a div</div>
    <style>
        div {
            width: 100%;
            height: 200px;
            background-color: aquamarine;
        }
    </style>

    <!-- 类选择器 -->
    <div class="blue">i am a div</div>
    <style>
        .blue {
            color: blue;
        }
    </style>

    <!-- id选择器 -->
    <div id="red">i am a div</div>
    <style>
        #red {
            color: red;

            background-color: blue;
            width: 200px;
            height: 150px;
        }
    </style>

    <!-- 通配符选择器 -->
    <div>i am a div</div>
    <style>
        * {
            color: purple;
        }
    </style>

    <!-- 后代选择器 -->
    <div>
        <span>i am the first span, 是div的后代
            <div>我是span的后代</div>
        </span>
        <p>i am the first p</p>
    </div>
    <style>
        div div {
            color: aqua;
        }
    </style>

    <!-- 子类选择器 -->
    <div>
        <span>i am the first span, 是div的后代
            <div>我是span的后代</div>
        </span>
        <p>i am the first p</p>
    </div>
    <style>
        div > span {
            color: aqua;
        }
    </style>


    <!-- 并集选择器 -->
    <div>
        <span>i am the first span, 是div的后代
            <div id="one">我是span的后代</div>
        </span>
        <p>i am the first p</p>
    </div>
    <style>
        #one, p {
            color: aqua;
        }
    </style>

    <!-- 伪类选择器 -->
    <div class="one">i am a div</div>
    <span>i am a span</span>
    <style>
        .one:hover {  /*设置鼠标悬停颜色*/
            color: orange;
        }
        span:active { /*设置鼠标按下未放开时颜色*/
            color: red;
        }
    </style>
</body>
</html>